<script setup>
import {BaseImgUrl} from "../../utils/lshttp";
import {ref, onMounted} from "vue";
import {
  getBuToPagePath, getOrderNoPath,
  toMiniAppBusiness,
  toMiniAppOrderPage,
  toMiniAppRedPage
} from "../../utils/utils";
import {useCommonInfoStore} from "../../stores/modules/commonInfo";
import {onShow} from "@dcloudio/uni-app";
import {uploadOrderIdAPI} from "../../services/order";
const commonInfoStore = useCommonInfoStore()
const { twoFixed } = useCommonInfoStore() // 使用commonInfoStore状态管理器
console.log('平台数据=', commonInfoStore.reward)
const props = defineProps({
  shop: {
    type: Object
  },
  signUp: {
    type: Number
  },
  isUpdataBtn: {
    type: Boolean
  },
  isShowOrderNo: {
    type: Boolean
  },
  orderNoVal: {
    type: String
  },
  userInfo: {
    type: Object
  },
  newUser: {
    type: String
  }
})
const emits = defineEmits(['ShowOrderNo', 'orderChange', 'orderFocus', 'orderBlur'])
onShow(() => {

})
const shopval = ref()
const signUp = ref()
onMounted(() => {
  signUp.value = props.signUp
  shopval.value = props.shop
  console.log('signUp===', props.signUp)
  console.log('shop==', props.shop)
})
const mtRedData = ref() //美团
const elmRedData = ref() //饿了么
const jdRedData = ref() //京东
// 允许跳转领红包
const doMeiTuanAndQiangDan = async () => {
  mtRedData.value = commonInfoStore.reward ? commonInfoStore.reward.order[0] : []
  elmRedData.value = commonInfoStore.reward ? commonInfoStore.reward.order[1] : []
  jdRedData.value = commonInfoStore.reward ? commonInfoStore.reward.order[2] : []
  console.log('店铺平台=', jdRedData.value)
  //await toMiniAppRedPage(shop.value.type === 1 ? mtRedData.value : elmRedData.value )
  await toMiniAppRedPage(props.shop.shop.type === 3 ? jdRedData.value : props.shop.shop.type === 2 ? elmRedData.value : mtRedData.value)
  if (signUp.value === 1){
    signUp.value = 2 // 跳转平台领取红包，状态为2
  }

}
// 去平台店铺下单
const goShop = (type, path) => {
  console.log('type=', type, 'path=', path)
  toMiniAppBusiness(type, path)
  signUp.value = 3 // 跳转平台店铺，状态为3
}
// 跳转平台复制订单号
const orderNoCopy = async (type) => {
  signUp.value = 3
  await toMiniAppOrderPage(type)
}
const isUpdataBtn = ref(props.isUpdataBtn) // 是否更新按钮
const orderNoVal = ref(props.orderNoVal ? props.orderNoVal : '') // 订单号
// 输入订单号
const orderNoChange = (e) => {
  // console.log('订单号=', e)
  orderNoVal.value = e
  if (e){
    isUpdataBtn.value = true
  } else {
    isUpdataBtn.value = false
  }
  emits('orderChange', {orderNoVal:orderNoVal.value})
}
// 订单号输入框聚焦事件
const orderNoFocus = () => {
  let scHeight = 1
  console.log('scHeight=', scHeight)
  emits('orderFocus', {scHeight: scHeight})
}
// 订单号输入框失去焦点事件
const orderNoBlur = () => {
  let scHeight = 0
  console.log('scHeight=', scHeight)
  emits('orderBlur', scHeight)
}

const isShowOrderNo = ref(false)
// 提交订单号
const updataOrderFun = async () => {
  console.log('shop', props.shop)
  // 判断平台订单号的位数是否正确
  if (props.shop.shop.type == 1 || props.shop.shop.type == 2){
    // 清除订单号空格
    if (orderNoVal.value.indexOf(' ') != -1) {
      orderNoVal.value = orderNoVal.value.replace(/\s*/g, '')
    }
    // 美团和饿了么订单号
    if (orderNoVal.value.length < 18 || orderNoVal.value.length > 20){
      uni.showToast( {
        title: '请输入18-20位外卖订单号',
        icon: 'none',
        duration: 1500
      })
      return
    }
  } else if (props.shop.shop.type == 3) {
    // 清除订单号空格
    if (orderNoVal.value.indexOf(' ') != -1) {
      orderNoVal.value = orderNoVal.value.replace(/\s*/g, '')
    }
    // 京东订单号
    if (orderNoVal.value.length < 12 || orderNoVal.value.length > 14){
      uni.showToast( {
        title: '请输入12-14位外卖订单号',
        icon: 'none',
        duration: 1500
      })
      return
    }
    console.log('orderNoVal.value==',orderNoVal.value)
  }
  isUpdataBtn.value = false
  isShowOrderNo.value= true
  const res = await uploadOrderIdAPI(props.shop.id, orderNoVal.value)
  if (res.status == 0) {
    return
  }
  // console.log('isShowOrderNo=', isShowOrderNo.value)
  // 返回订单号校验模块是否显示
  emits('ShowOrderNo', {isShowOrderNo:isShowOrderNo.value, orderNoVal:orderNoVal.value})

}
// 通过订单id查询订单号
/* const getOrderNo = async (orderId, orderNoVal) => {
  const res = await uploadOrderIdAPI(orderId, orderNoVal)
  if (res.msg == '订单号已存在') {
    return false
  }
} */

// 监听跳转
const handleLaunch = (e) => {
  if (signUp.value === 1){
    signUp.value = 2
  }else{
    signUp.value = 3
  }
  // alert('请勿重复跳转'+ signUp.value)
}
const LaunchOne = (e) => {
  if (signUp.value === 1){
    signUp.value = 2
  }else {
    signUp.value = 3
  }
  // alert('请勿重复跳转'+ signUp.value)

}
// 监听错误
const handleError = (e) => {
  console.log("handleError", e)
}
</script>

<template>
  <view class="shop_process_num_right">
    <view class="shop_process_num_right_item">
      <view class="shop_process_num_line"><u-line direction="col" :color="signUp == 2 || signUp == 3? '#fd7c22' : '#D3D3D3'" :dashed="true"></u-line></view>
      <view class="shop_process_num_right_item_title"><view class="process_num" :class="signUp == 1 || signUp == 2 || signUp == 3 ? 'process_num_active' : ''">1</view>前往{{ props.shop?.shop.type == 1 ? '美团' : props.shop?.shop.type == 2 ? '饿了么' : '京东'}}领取专属外卖红包</view>
      <view @click="doMeiTuanAndQiangDan" v-if="signUp == 1" class="shop_process_num_right_item_warp" :class="props.shop?.shop.type == 1 ? 'meituan meituan_active' : props.shop?.shop.type == 2 ? 'elm elm_active' : 'jd jd_active'">
        <image v-if="props.shop?.shop.type === 1" :src="BaseImgUrl + '/shop/process/process_meituan02.png'" mode="widthFix" style="width: 40rpx;height: 40rpx;"></image>
        <image v-if="props.shop?.shop.type === 2" :src="BaseImgUrl + '/shop/process/process_elm02.png'" mode="widthFix" style="width: 40rpx;height: 40rpx;"></image>
        <image v-if="props.shop?.shop.type === 3" :src="BaseImgUrl + '/shop/process/process_jd2.png'" mode="widthFix" style="width: 40rpx;height: 40rpx;"></image>
        <text style="padding-left: 10rpx;">第一步· 领最高88元外卖红包{{signUp}}</text>
        <!-- #ifdef H5 -->
        <view class="btns_box" style="position: absolute;z-index: 2;left: 0;width: 100%;height:100%;opacity: 0.01;background-color: #ff531a">
          <wx-open-launch-weapp id="launch_one" @launch="LaunchOne"
            :username="props.shop?.shop.type === 1 ? commonInfoStore.reward.order[0].original_id : props.shop?.shop.type === 2 ? commonInfoStore.reward.order[1].original_id : commonInfoStore.reward.order[2].original_id"
            :path="props.shop?.shop.type === 1 ? commonInfoStore.reward.order[0].path : props.shop?.shop.type === 2 ? commonInfoStore.reward.order[1].path : commonInfoStore.reward.order[2].path"
            style="position: absolute;z-index: 2;left: 0;width: 100%;height:100%;opacity: 0.01;background-color: #ff531a">
            <component :is="'script'" type='text/wxtag-template' style="display: block;">
              <div style="position: absolute;top: 0; left: 0; width: 100%;height: 100% ; opacity: 0"></div>
            </component>
          </wx-open-launch-weapp>
        </view>
        <!-- #endif -->
      </view>
      <view  @click="doMeiTuanAndQiangDan" v-else class="shop_process_num_right_item_warp" :class="props.shop?.shop.type == 1 ? 'meituan' : props.shop?.shop.type == 2 ? 'elm' : 'jd'">
        <image v-if="props.shop?.shop.type === 1" :src="BaseImgUrl + '/shop/process/process_meituan02.png'" mode="widthFix" style="width: 40rpx;height: 40rpx;"></image>
        <image v-if="props.shop?.shop.type === 2" :src="BaseImgUrl + '/shop/process/process_elm02.png'" mode="widthFix" style="width: 40rpx;height: 40rpx;"></image>
        <image v-if="props.shop?.shop.type === 3" :src="BaseImgUrl + '/shop/process/process_jd2.png'" mode="widthFix" style="width: 40rpx;height: 40rpx;"></image>
        <text style="padding-left: 10rpx;">第一步· 领最高88元外卖红包</text>
        <!-- #ifdef H5 -->
        <view class="btns_box" style="position: absolute;z-index: 2;left: 0;width: 100%;height:100%;opacity: 0.01;background-color: #ff531a">
          <wx-open-launch-weapp id="launch-btn" @launch="LaunchOne" @error="handleError"
             :username="props.shop?.shop.type === 1 ? commonInfoStore.reward.order[0].original_id : props.shop?.shop.type === 2 ? commonInfoStore.reward.order[1].original_id : commonInfoStore.reward.order[2].original_id"
             :path="props.shop?.shop.type === 1 ? commonInfoStore.reward.order[0].path : props.shop?.shop.type === 2 ? commonInfoStore.reward.order[1].path : commonInfoStore.reward.order[2].path"
             style="position: absolute;z-index: 2;left: 0;width: 100%;height:100%;opacity: 0.01;background-color: #ff531a">
            <component :is="'script'" type='text/wxtag-template' style="display: block;">
              <div style="position: absolute;top: 0; left: 0; width: 100%;height: 100% ; opacity: 0"></div>
            </component>
          </wx-open-launch-weapp>
        </view>
        <!-- #endif -->
      </view>
      <view v-if="signUp == 1" @click="doMeiTuanAndQiangDan" class="finger">
        <view class="circle"></view>
        <image :src="BaseImgUrl + '/shop/process/process_img01.png'" mode="widthFix" style="width: 72rpx;z-index: 1;position: relative;"></image>
      </view>
    </view>
    <view class="shop_process_num_right_item">
      <view class="shop_process_num_line"><u-line direction="col" :color="signUp == 2 || signUp == 3? '#fd7c22' : '#D3D3D3'" :dashed="true"></u-line></view>
      <view class="shop_process_num_right_item_title">
        <view class="process_num" :class="signUp == 2 || signUp == 3 ? 'process_num_active' : ''">2</view>
        <view>通过返利链接点外卖，<text style="color: #FF6200">实付满
          <text>{{ twoFixed(props.shop?.activity.minimum_amount) }}</text>
          返
          <text v-if="props.newUser == '新用户'">{{ twoFixed(props.shop?.activity.minimum_amount) }}</text>
          <text v-if="props.newUser == '老用户'">
            {{ props.userInfo.is_member === 0 ? twoFixed(props.shop?.activity.rebate_amount) : twoFixed(props.shop?.activity.member_rebate_amount) }}
          </text>
        </text>
        </view>
      </view>
      <view @click="goShop(props.shop?.shop.type, props.shop?.jump_path)" v-if="signUp == 2" class="shop_process_num_right_item_warp" :class="props.shop?.shop.type == 1 ? 'meituan meituan_active' : props.shop?.shop.type == 2 ? 'elm elm_active' : 'jd jd_active'">
        <view class="shop_process_num_right_item_warp_text">第二步·前往{{ props.shop?.shop.type == 1 ? '美团' : props.shop?.shop.type == 2 ? '饿了么' : '京东'}}店铺点外卖</view>
        <!-- #ifdef H5 -->
        <view class="btns_box" style="position: absolute;z-index: 2;left: 0;width: 100%;height:100%;opacity: 0.01;background-color: #ff531a">
          <wx-open-launch-weapp id="launch-btn" @launch="handleLaunch" @error="handleError"
                                :username="getBuToPagePath(props.shop?.shop.type)"
                                :path="props.shop?.jump_path"
                                style="position: absolute;z-index: 2;left: 0;width: 100%;height:100%;opacity: 0.01;background-color: #ff531a">
            <component :is="'script'" type='text/wxtag-template' style="display: block;">
              <div style="position: absolute;top: 0; left: 0; width: 100%;height: 100% ; opacity: 0"></div>
            </component>
          </wx-open-launch-weapp>
        </view>
        <!-- #endif -->
      </view>
      <view @click="goShop(props.shop?.shop.type, props.shop?.jump_path)" v-else class="shop_process_num_right_item_warp" :class="props.shop?.shop.type == 1 ? 'meituan' : props.shop?.shop.type == 2 ? 'elm' : 'jd'">
        <view class="shop_process_num_right_item_warp_text">第二步·前往{{ props.shop?.shop.type == 1 ? '美团' : props.shop?.shop.type == 2 ? '饿了么' : '京东'}}店铺点外卖</view>
        <!-- #ifdef H5 -->
        <view class="btns_box" style="position: absolute;z-index: 2;left: 0;width: 100%;height:100%;opacity: 0.01;background-color: #ff531a">
          <wx-open-launch-weapp id="launch-btn" @launch="handleLaunch" @error="handleError"
                                :username="getBuToPagePath(props.shop?.shop.type)"
                                :path="props.shop?.jump_path"
                                style="position: absolute;z-index: 2;left: 0;width: 100%;height:100%;opacity: 0.01;background-color: #ff531a">
            <component :is="'script'" type='text/wxtag-template' style="display: block;">
              <div style="position: absolute;top: 0; left: 0; width: 100%;height: 100% ; opacity: 0"></div>
            </component>
          </wx-open-launch-weapp>
        </view>
        <!-- #endif -->
      </view>
      <view class="shop_process_num_right_item_warp_tip">tips:若提示店铺ID失效，请点击这里进店下单 ></view>
      <view v-if="signUp == 2" @click="goShop(props.shop?.shop.type, props.shop?.jump_path)" class="finger" style="bottom: 34rpx">
        <view class="circle"></view>
        <image :src="BaseImgUrl + '/shop/process/process_img01.png'" mode="widthFix" style="width: 72rpx;z-index: 1;position: relative;"></image>
      </view>
    </view>
    <view class="shop_process_num_right_item">
      <view class="shop_process_num_right_item_title" style="justify-content: space-between">
        <view class="process_num" :class="signUp == 3 ? 'process_num_active' : ''">3</view>
        <text>点完外卖后，提交外卖订单号</text>
        <view @click="orderNoCopy(props.shop?.shop.type)" class="copy_order">
          <image v-if="props.shop?.shop.type === 1" :src="BaseImgUrl + '/shop/process/shop_meituan.png'" mode="widthFix" style="width: 40rpx;height: 40rpx;"></image>
          <image v-if="props.shop?.shop.type === 2" :src="BaseImgUrl + '/shop/process/shop_elm.png'" mode="widthFix" style="width: 40rpx;height: 40rpx;"></image>
          <image v-if="props.shop?.shop.type === 3" :src="BaseImgUrl + '/shop/process/shop_jd.png'" mode="widthFix" style="width: 40rpx;height: 40rpx;"></image>
          <text style="padding-left:10rpx;">复制单号</text>
          <!--:path="getOrderNoPath(props.shop?.shop.type)"-->
          <!-- #ifdef H5 -->
          <view class="btns_box" style="position: absolute;z-index: 2;left: 0;width: 100%;height:100%;opacity: 0.01;background-color: #ff531a">
            <wx-open-launch-weapp id="launch-btn" @launch="handleLaunch" @error="handleError"
                                  :username="getBuToPagePath(props.shop?.shop.type)"
                                  :path="getOrderNoPath(props.shop?.shop.type).path"
                                  style="position: absolute;z-index: 2;left: 0;width: 100%;height:100%;opacity: 0.01;background-color: #ff531a">
              <component :is="'script'" type='text/wxtag-template' style="display: block;">
                <div style="position: absolute;top: 0; left: 0; width: 100%;height: 100% ; opacity: 0"></div>
              </component>
            </wx-open-launch-weapp>
          </view>
          <!-- #endif -->
        </view>
      </view>
      <view class="shop_process_num_right_item_put">
        <view style="width: calc(100% - 150rpx)">
          <u-input
              placeholder="输入或粘贴外卖订单编号"
              border="none"
              v-model="orderNoVal"
              @change="orderNoChange"
          ></u-input>
        </view>
        <!--:class="shop?.shop.type == 1 && isUpdataBtn? 'meituan_active' : shop?.shop.type == 2 && isUpdataBtn == true? 'elm_active' : shop?.shop.type == 3 && isUpdataBtn ? 'jd_active' : ''"-->
        <view @click="updataOrderFun" v-if="isUpdataBtn" class="shop_process_num_right_btn" :class="props.shop?.shop.type == 1 ? 'meituan_active' : props.shop?.shop.type == 2 ? 'elm_active' : 'jd_active'">
          提交
        </view>
        <view @click="updataOrderFun" v-else class="shop_process_num_right_btn">
          提交
        </view>
      </view>
      <view v-if="signUp == 3" @click="doMeiTuanAndQiangDan" class="finger" style="bottom: 0;top: 40rpx;">
        <view class="circle"></view>
        <image :src="BaseImgUrl + '/shop/process/process_img01.png'" mode="widthFix" style="width: 72rpx;z-index: 1;position: relative;"></image>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
pages{
  width: 100%;
}
.shop_process_num_right{
  width: 100%;
  padding: 20rpx 30rpx 30rpx 30rpx;
  .shop_process_num_right_item{
    padding-bottom: 10rpx;
    width: 100%;
    position: relative;
    .shop_process_num_line{
      width: 48rpx;
      height: 100%;
      position: absolute;
      left: 0;
      top: 20rpx;
      z-index: 1;
    }
    .shop_process_num_right_item_title{
      font-size: 28rpx;
      color: #3D3D3D;
      height: 80rpx;
      line-height: 80rpx;
      padding-left: 48rpx;
      font-weight: bold;
      display: flex;
      position: relative;
      .process_num{
        position: absolute;
        left: -4rpx;
        top: 20rpx;
        z-index: 2;
        color: #FFFFFF;
        background: #CDCDCD;
        width: 36rpx;
        height: 36rpx;
        line-height: 36rpx;
        text-align: center;
        font-size: 28rpx;
        border-radius: 50%;
      }
      .process_num_active{
        background: #FD7C22;
      }
      .copy_order{
        height: 34rpx;
        line-height: 34rpx;
        margin-top: 10rpx;
        font-size: 24rpx;
        font-weight: normal;
        color: #888888;
        padding: 8rpx 12rpx;
        border: 2rpx solid #E4E4E4;
        border-radius: 30rpx;
        display: flex;
        align-items: center;
      }
    }
    .shop_process_num_right_item_warp{
      height: 72rpx;
      line-height: 72rpx;
      font-size: 26rpx;
      margin-left: 48rpx;
      border-radius: 50rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }

    .shop_process_num_right_item_warp_tip{
      font-size: 24rpx;
      color: #666666;
      line-height: 50rpx;
      text-align: center;
    }
    .shop_process_num_right_item_put{
      height: 32rpx;
      line-height: 60rpx;
      padding: 20rpx 8rpx 20rpx 30rpx;
      border: 2rpx solid #E1E1E1;
      border-radius: 50rpx;
      font-size: 26rpx;
      margin-left: 48rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .shop_process_num_right_btn{
        width: 140rpx;
        height: 56rpx;
        line-height: 56rpx;
        text-align: center;
        border-radius: 50rpx;
        color: #FFFFFF;
        font-size: 28rpx;
        background: linear-gradient( 270deg, #D3D3D3 0%, #E2E2E2 100%);
      }
    }
    .finger{
      width: 72rpx;
      height: 72rpx;
      position: absolute;
      right: 0;
      bottom: -20rpx;
      z-index: 10;
    }
  }
}
/* 手指动画css */
.circle {
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: #fcb141 ;
  border-radius: 50%;
  right: 48rpx;
  bottom: 48rpx;
}
.circle:before {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  opacity: .4;
  background-color: pink;
  animation: scale 1s infinite cubic-bezier(0, 0, .49, 1.02);
}
@keyframes scale {
  0% {
    transform: scale(1)
  }

  50%,
  75% {
    transform: scale(3)
  }

  78%,
  100% {
    opacity: 0
  }
}
@keyframes scales {
  0% {
    transform: scale(1)
  }

  50%,
  75% {
    transform: scale(2)
  }

  78%,
  100% {
    opacity: 0
  }
}
/* 平台样式背景 */
.meituan{
  color: #333333;
  background: rgba(255, 214, 2, 0.5);
}
.meituan_active{
  background: rgba(255, 214, 2, 1) !important;
}
.elm{
  color: #FFFFFF;
  background: rgba(67, 160, 255, .5);
}
.elm_active{
  background: rgba(67, 160, 255, 1) !important;
}
.jd{
  color: #FFFFFF;
  background: rgba(255, 62, 30, .5);
}
.jd_active{
  background: rgba(255, 62, 30, 1) !important;
}

</style>